<template>
  <div class="warp_auto">
    <el-form ref="form" :model="form" class="warp_top">
      <div class="jiansuo-box">
        <span class="label">统计方式：</span>
        <el-select v-model="form.region" @change="selectChanged" class="input">
          <el-option v-for="item in options" :key="item.id" :value="item.label"></el-option>
        </el-select>
      </div>

      <div class="jiansuo-box" v-if='this.val==="按天"'>
        <span class="label">日期：</span>
        <el-date-picker
          class="input"
          v-model="form.startTime"
          type="date"
          :editable="false"
          prefix-icon="el-icon-caret-bottom"
          value-format="yyyy-MM-dd"
          :clearable='false'>
        </el-date-picker>
        <span class="line">--</span>
        <el-date-picker
          class="input"
          v-model="form.endTime"
          type="date"
          :editable="false"
          prefix-icon="el-icon-caret-bottom"
          value-format="yyyy-MM-dd"
          :clearable='false'>
        </el-date-picker>
      </div>

      <div class="jiansuo-box" v-else-if='this.val==="按月"'>
        <span class="label">年份：</span>
        <el-date-picker
          class="input"
          v-model="form.value3"
          type="year" placeholder="选择年"
          value-format="yyyy">
        </el-date-picker>
      </div>
      <el-select style="margin: 0 20px;" v-model="form.mold" placeholder="请选择关联类型">
        <el-option v-for="item in typeList" :key="item.menuTypeCode" :label="item.menuTypeName"
                   :value="item.menuTypeCode"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="getData" class="btn">检索</el-button>
    </el-form>

    <el-card style="margin-bottom: 20px">
      <zz-chart v-bind="chartData"></zz-chart>
    </el-card>

    <div style="display: flex">
      <el-card shadow="never">
        <el-popover
          placement="top-start"
          width="60"
          trigger="hover"
          style="float: right"
          content="导出到Excel表">
          <el-button type="primary" style="margin-bottom:10px;" @click="Excel" slot="reference">导出
            <i class="el-icon-question"></i>
          </el-button>
        </el-popover>
        <el-table :data="dataarr" stripe height="450" style="width: 100%"
                  :header-cell-style="{background:'#d2e0f9',color:'#606266'}">
          <el-table-column v-for="item in dataKey" :label="item" :prop="item">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleData(scope.row, scope.$index)"
              >选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card style="width: 34%;margin-left: 1%" v-if="showControlFlag">
        <div>
          <div>患者姓名：{{ patientName }}</div>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-on:click.stop.native
            v-model="info.dvtFlag"
          >是否进行深静脉血栓(DVT)预防治疗
          </el-checkbox>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-on:click.stop.native
            v-model="info.bunble3hFlag"
          >是否进行感染性休克3h集束化治疗(bundle)完成
          </el-checkbox>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-on:click.stop.native
            v-model="info.bunble6hFlag"
          >是否进行感染性休克6h集束化治疗(bundle)完成
          </el-checkbox>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-on:click.stop.native
            v-model="info.vapFlag"
          >是否进行呼吸机相关性肺炎(VAP)的预防
          </el-checkbox>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-model="info.bak1"
          >是否尿管相关感染
          </el-checkbox>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-on:click.stop.native
            v-model="info.bak2"
          >是否血管相关感染
          </el-checkbox>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-on:click.stop.native
            v-model="info.bak3"
          >是否使用抗菌药物
          </el-checkbox>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-on:click.stop.native
            v-model="info.bak4"
          >是否抗菌药物病原体送检
          </el-checkbox>
          <el-checkbox
            style="display: block; padding-top: 15px"
            true-label="1"
            false-label="2"
            v-on:click.stop.native
            v-model="info.bak5"
          >是否感染休克
          </el-checkbox>
          <el-button
            type="primary"
            class="btn"
            style="margin-top: 35px"
            @click="saveData"
          >保存
          </el-button
          >
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import componentDialog from "@/components/mask/churuke.vue";
import ZzChart from "@/views/Qualitycontrol/zzchart.vue";
import {getTenantId} from "@/utils/auth";
import {getSqlTypeList, getZhongZhengData} from "@/api/ZSqlSettings";
import {patientControlgetData, patientControlinsert, patientControlupdate} from "@/api/table";
import {Message} from "element-ui";

export default {
  components: {
    ZzChart,
    componentDialog,
  },
  data() {
    return {
      dataarr: [],
      dataKey: ["姓名", "性别"],
      typeList: [],
      value: "",
      val: "按天",
      dataArr: [],
      form: {
        mold: "",
        region: "按天",
        value3: "",
        startTime: "",
        endTime: "",
      },
      options: [
        {
          id: "0",
          value: "0",
          label: "按天",
        },
        {
          id: "1",
          value: "1",
          label: "按月",
        }
      ],
      chartData: {
        title: '',
        xData: [],
        yData: [],
        nameData: [],
        valueData: []
      },
      info: {
        bunble3hFlag: "",
        bunble6hFlag: "",
        dvtFlag: "",
        vapFlag: "",
        bak1: "",
        bak2: "",
        bak3: "",
        bak4: "",
        bak5: "",
        patientId: "",
        id: "",
      },
      showControlFlag: false,
      patientName: "",
    };
  },
  mounted() {
  },
  created() {
    this.getCurrentMonthFirst();
    this.getCurrentMonthLast();
    this.getCurrentYear();

    this.searchMenuType();
  },
  methods: {
    //保存质控相关数据
    saveData() {
      // console.log(this.info);
      this.info.createTime = null;
      if (this.info.id == "") {
        //新增
        patientControlinsert(this.info).then((res) => {
          if (res.code == 200) {
            this.getDataByPatientId(this.info.patientId);
            Message({
              message: "保存成功",
              type: "sucess",
              duration: 1500,
            });
          } else {
            Message({
              message: "保存失败",
              type: "warning",
              duration: 1500,
            });
          }
        })
      } else {
        //修改
        patientControlupdate(this.info).then((res) => {
          if (res.code == 200) {
            this.getDataByPatientId(this.info.patientId);
            Message({
              message: "保存成功",
              type: "success",
              duration: 1500,
            });
          } else {
            Message({
              message: "保存失败",
              type: "warning",
              duration: 1500,
            });
          }
        })
      }
    },
    //清空数据
    clearData() {
      this.info = {
        bunble3hFlag: "",
        bunble6hFlag: "",
        dvtFlag: "",
        vapFlag: "",
        bak1: "",
        bak2: "",
        bak3: "",
        bak4: "",
        bak5: "",
        patientId: "",
        id: "",
      };
    },
    //选中病人
    handleData(row, index) {
      this.clearData();
      if(row.姓名){
        this.patientName = row.姓名;
      }
      // this.patientName = row.name;
      this.showControlFlag = true;
      this.info.patientId = row.id;
      this.getDataByPatientId(this.info.patientId);
    },
    //赋值质控数据
    getDataByPatientId(patientId) {
      patientControlgetData({patientId: patientId}).then((res) => {
        if (res.code == 200 && res.data != null) {
          this.info = res.data;
        } else {
          this.info = {
            bunble3hFlag: "",
            bunble6hFlag: "",
            dvtFlag: "",
            vapFlag: "",
            bak1: "",
            bak2: "",
            bak3: "",
            bak4: "",
            bak5: "",
            patientId: patientId,
            id: "",
            createTime: "",
          };
        }
      });
    },
    getMenuTypeName(menuId) {
      console.log(this.typeList)
      const menu = this.typeList.find(item => {
        console.log(item)
        console.log(item.menuTypeCode)
        console.log(menuId)
        if (item.menuTypeCode === menuId) {
          return item;
        }
      });
      console.log(menu)
      return menu ? menu.menuTypeName : '未知类型';
    },
    getData() {
      this.showControlFlag = false;
      // 折线图数据
      getZhongZhengData({
        sqlType: 0,
        menuType: this.form.mold,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      }).then((res) => {
        this.chartData.title = this.getMenuTypeName(this.form.mold) || '无标题';
        this.chartData.xData = res.data.projectNames
        this.chartData.yData = res.data.projectValues
      })
      // 饼图数据
      getZhongZhengData({
        sqlType: 1,
        menuType: this.form.mold,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      }).then((res) => {
        this.chartData.nameData = res.data.projectNames;
        this.chartData.valueData = res.data.projectValues;
      })
      // 饼图数据
      getZhongZhengData({
        sqlType: 2,
        menuType: this.form.mold,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      }).then((res) => {
        // console.log(res)
        if (res.data.allKeys) {
          console.log("哈哈哈哈")
          this.dataKey = res.data.allKeys;
          this.dataarr = res.data.list;
        }

      })
    },
    searchMenuType() {
      getSqlTypeList().then(response => {
        this.typeList = response.data;
        this.form.mold = this.typeList[0].menuTypeCode
        this.getData()
      })
    },
    getCurrentMonthFirst() {
      var date = new Date()
      date.setDate(1)
      var month = parseInt(date.getMonth() + 1)
      var day = date.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      this.form.startTime = date.getFullYear() + '-' + month + '-' + day
    },
    getCurrentMonthLast() {
      var date = new Date()
      var month = parseInt(date.getMonth() + 1)
      var day = date.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      this.form.endTime = date.getFullYear() + '-' + month + '-' + day
    },
    getCurrentYear() {
      var date = new Date();
      this.form.value3 = date.getFullYear() + "";
    },
    //导出
    Excel() {
      axios({
        url: "/api/qualityControl/downloadAPACHEIITotal", //打包
        method: "post",
        responseType: "blob",  //也可以使用blob
        headers: {
          'tenantId': getTenantId()
        },
        data: {
          type: this.form.region,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          year: this.form.value3,
        }
      })
        .then((res) => {
          console.log(res);
          if (res) {
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=utf-8",
            }); // res就是接口返回的文件流了
            let objectUrl = URL.createObjectURL(blob);
            const elink = document.createElement("a");
            elink.download = "APACHEII统计信息.xls"; //下载文件名称,
            elink.style.display = "none";
            elink.href = objectUrl;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    selectChanged(value) {
      this.val = value;
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
